<template>
  <view>
    <!--班级开始 -->
    <view class="uni-panel">
      <view
        class="uni-panel-h flex justify-between"
        :class="classOpen ? 'uni-panel-h-on' : ''"
        @click="triggerClass()"
      >
        <view>
          <text class="uni-panel-text">
            <text class="cuIcon-title text-orange"></text>我的班级
          </text>
        </view>
        <view>
          <text>{{classList.length}}/{{classList.length}}</text>
          <text
            class="uni-panel-icon uni-icon"
            :class="classOpen? 'uni-panel-icon-on' : ''"
          >{{classOpen ? '&#xe581;' : '&#xe470;'}}</text>
        </view>
      </view>

      <!-- 班级 -->
      <view v-if="classOpen">
        <view v-for="(item,index) in classList" :key="index" @click="handleGoClassDetail(item.id)">
          <!-- :url="`/pages/classDetail/index?id=${item.id}`" -->
          <uni-card
            :title="item.name"
            thumbnail="http://39.106.100.179:9999/group1/M00/00/00/J2pks16tZd6AdzqdAAAgMjykNZk675.png"
            :extra="item.length"
            :note="item.courseName"
          >{{item.desc}}</uni-card>
        </view>
      </view>
      <!--相关课程结束-->
    </view>

    <!-- 2 -->
    <view class="uni-panel">
      <view
        class="uni-panel-h flex justify-between"
        :class="mclassOpen ? 'uni-panel-h-on' : ''"
        @click="triggermClass()"
      >
        <view>
          <text class="uni-panel-text">
            <text class="cuIcon-title text-orange"></text>我管理班级的课程
          </text>
        </view>
        <view>
          <text>{{courseList.length}}/{{courseList.length}}</text>
          <text
            class="uni-panel-icon uni-icon"
            :class="mclassOpen ? 'uni-panel-icon-on' : ''"
          >{{mclassOpen ? '&#xe581;' : '&#xe470;'}}</text>
        </view>
      </view>

      <!-- 图文卡片模式 -->
      <!-- :extra="item.createTime" -->
      <view v-if="mclassOpen">
        <navigator v-for=" (item,index) in courseList" :key="index">
          <!-- :url="`/pages/divideClass/index?cId=${item.id}`" -->
          <!--   @click="handleGoDivideClass(item.id)" -->
          <uni-card
            :title="item.name"
            mode="style"
            :is-shadow="true"
            :thumbnail="item.imgUrl"
            @click="handleGoDivideClass(item.id)"
          >{{item.desc}}</uni-card>
        </navigator>
      </view>
    </view>

    <!-- 班级结束-->
  </view>
</template>

<script>
import { uniCard } from "@dcloudio/uni-ui";
export default {
  components: {
    uniCard
  },
  data() {
    return {
      classOpen: true,
      mclassOpen: false,
      classList: [],
      courseList: [],
      list: {}
    };
  },
  methods: {
    handleGoClassDetail(id) {
      uni.navigateTo({
        url: `/pages/classDetail/index?id=${id}`
      });
    },
    handleGoDivideClass(id) {
      uni.navigateTo({
        url: `/pages/divideClass/index?cId=${id}`
      });
    },
    triggerClass() {
      this.classOpen = !this.classOpen;
    },
    trigger(e) {
      var index = e;
      console.log("index的值" + index);
      uni.navigateTo({
        url: "/pages/clockIn/index",
        success: res => {},
        fail: () => {
          console.log(假的);
        },
        complete: () => {}
      });
    },
    triggermClass() {
      this.mclassOpen = !this.mclassOpen;
    },
    goDetailPage(e) {
      //let url =  '/pages/courseDetail/index?course_id=' + e;
      let url = "/pages/divideClass/index?cid=" + e;
      //let url = "/pages/collage/index";
      uni.navigateTo({
        url: url,
        success: res => {},
        fail: () => {
          console.log(假的);
        },
        complete: () => {}
      });
    },
    getClass() {
      this.request({
        url:
          this.apiServer +
          "/class/findMyClassesByUserId?userId=" +
          uni.getStorageSync("user").id +
          "&skip=0&limit=20"
      }).then(res => {
        console.log(res);
        this.classList = res.data;
        this.request({
          url:
            this.apiServer +
            "/courses/findTeacherCoursesByUId?uId=" +
            uni.getStorageSync("user").id
        }).then(res => {
          console.log(res);
          this.courseList = res.data;
        });
      });
    },
    getCourse() {}
  },
  onLoad() {
    console.log("class-------------" + uni.getStorageSync("user").id);
    this.classList = null;
    this.courseList = null;
    this.getClass();
    this.getCourse();
  }
};
</script>

<style>
.uni-panel {
  margin-bottom: 12px;
}
.uni-icon {
  font-family: uniicons;
  font-weight: normal;
}
.uni-panel-h {
  background-color: #ffffff;
  flex-direction: row;
  align-items: center;
  padding: 12px;
}
/*
.uni-panel-h:active {
    background-color: #f8f8f8;
}
 */
.uni-panel-h-on {
  background-color: #f0f0f0;
}

.uni-panel-text {
  flex: 1;
  color: #000000;
  font-size: 14px;
  font-weight: normal;
}

.uni-panel-icon {
  margin-left: 15px;
  color: #999999;
  font-size: 14px;
  font-weight: normal;
  transform: rotate(0deg);
  transition-duration: 0s;
  transition-property: transform;
}

.uni-panel-icon-on {
  transform: rotate(180deg);
}

.uni-navigate-item {
  flex-direction: row;
  align-items: center;
  background-color: #ffffff;
  border-top-style: solid;
  border-top-color: #f0f0f0;
  border-top-width: 1px;
  padding: 12px;
}

.uni-navigate-item:active {
  background-color: #f8f8f8;
}

.uni-navigate-text {
  flex: 1;
  color: #000000;
  font-size: 14px;
  font-weight: normal;
}

.uni-navigate-icon {
  margin-left: 15px;
  color: #999999;
  font-size: 14px;
  font-weight: normal;
}
</style>
